<template>
	<contents
		:heightInclude="['tabBar']"
		:class="store ? 'customer_service_page store' : 'customer_service_page'"
	>
		<scroll-view
			scroll-y
			:class="store ? 'msg_list store_msg_list' : 'msg_list'"
		>
			<view
				class="msg_item"
				v-for="(item, index) in msgInfo"
				:key="item.id"
			>
				<view class="left" v-if="item.type === 1">
					<u-avatar
						src="http://img.druglots.cn/image/avatar_f.png"
					></u-avatar>
					<view class="msg">
						{{ item.msg }}
						<view
							v-if="index === 0"
							@click="makeCall(storeInfo.telephone)"
						>
							{{ $t('locales.contactNumber') }}：
							<text style="color: #1027ff;">
								{{ storeInfo.telephone }}
							</text>
						</view>
						<view
							v-if="index === 0"
							@click="makeEmail(storeInfo.email)"
						>
							{{ $t('locales.email') }}：
							<text style="color: #1027ff;">
								{{ storeInfo.email }}
							</text>
						</view>
					</view>
				</view>
				<view class="right" v-if="item.type === 2">
					<text class="msg">{{ item.msg }}</text>
					<u-avatar
						src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"
					></u-avatar>
				</view>
			</view>
		</scroll-view>
		<view class="input_msg">
			<input
				class="input"
				:placeholder="$t('locales.inputDoubt')"
				@focus="focus"
				@blur="blur"
				@input="input"
				:value="msgVal"
			/>
			<u-button
				type="success"
				size="mini"
				:custom-style="{
					height: '60rpx',
					margin: '0 0 0 20rpx'
				}"
				@click="send(msgVal)"
			>
				{{ $t('locales.send') }}
			</u-button>
		</view>
	</contents>
</template>

<script>
import { getStoreContactWay } from '@/api/http/store'
export default {
	props: {
		// 店铺页
		store: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			msgInfo: [
				{
					id: 0,
					type: 1,
					msg: '你好呀～'
				}
			],
			msgVal: '',
			storeInfo: {}
		}
	},
	onLoad(opt) {
		this.getData()
	},
	created() {
		this.store && this.getData()
	},
	methods: {
		getData() {
			getStoreContactWay({
				domainPrefix: this.$store.getters.domainPrefix
					? this.$store.getters.domainPrefix
					: null
			}).then(res => {
				if (res.code === 200) {
					this.storeInfo = res.data
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
		},
		focus(e) {},
		blur(e) {},
		input(e) {
			this.msgVal = e.detail.value
		},
		send(val) {
			this.msgInfo.push({
				id: String(new Date()),
				type: 2,
				msg: val
			})
			this.msgVal = ''
			setTimeout(() => {
				this.msgInfo.push({
					id: String(new Date()),
					type: 1,
					msg:
						'不好意思，如有疑问可以拨打商家电话哦' +
						this.storeInfo.telephone
				})
			}, 1000)
		},
		makeCall(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			})
		},
		makeEmail(email) {
			// #ifndef H5
			uni.setClipboardData({
				data: email,
				success: () => {
					uni.showToast({
						title: '复制成功'
					})
				}
			})
			// #endif
		}
	}
}
</script>

<style lang="scss" scoped>
.store {
	min-height: calc(
		100vh - var(--status-bar-height) - env(safe-area-inset-bottom) -
			env(safe-area-inset-top) - 45px - 50px
	) !important;
}
.store_msg_list {
	height: calc(
		100vh - var(--status-bar-height) - env(safe-area-inset-bottom) - 45px -
			50px - 100rpx
	) !important;
}
.customer_service_page {
	.msg_list {
		/* #ifdef APP-PLUS || MP-WEIXIN */
		height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
		/* #endif */

		/* #ifdef H5 */
		height: calc(
			100vh - var(--status-bar-height) - env(safe-area-inset-bottom) -
				44px - 100rpx
		);
		/* #endif */
		.msg_item {
			.left {
				display: flex;
				padding: 30rpx;
				.msg {
					max-width: 450rpx;
					margin-left: 30rpx;
					display: inline-block;
					padding: 20rpx 40rpx;
					border: 1px solid #eee;
					background-color: #fff;
					border-radius: 12rpx;
					line-height: 45rpx;
					box-sizing: border-box;
				}
			}
			.right {
				display: flex;
				justify-content: flex-end;
				padding: 30rpx;
				.msg {
					max-width: 450rpx;
					margin-right: 30rpx;
					display: inline-block;
					padding: 20rpx 40rpx;
					background-color: rgb(135, 236, 87);
					border-radius: 12rpx;
					line-height: 45rpx;
					box-sizing: border-box;
				}
			}
		}
	}
	.input_msg {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		border-top: 1rpx solid #eee;
		.input {
			flex: 1;
			background-color: rgb(242, 242, 242);
			height: 60rpx;
			border-radius: 12rpx;
			padding-left: 15rpx;
			font-size: 23rpx;
		}
	}
}
</style>
